the position property: static, relative, fixed, absolute, sticky

position: static

it is actually positioned according to the page flow

This div element has a position static

position: relative

relative is positioned relative to its normal position

this div element has a position of relative

position fixed

fixed is positioned relativeto the viewport, which means it always stays in the same place even if the page is scrolled

this div element has a position fixed

position absolute

An element with position: absolute is positioned relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed)

this div element has a position relative
this div element has a position absolute

position sticky

please try to scroll inside this frame to understand how sticky positioned works

Hi sharad Bhai, I am Sticky

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates fugiat nesciunt accusamus unde ipsa aut porro suscipit! Nam necessitatibus quas accusamus porro molestias inventore veritatis eos suscipit earum, molestiae repudiandae.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore maxime omnis adipisci quia quo eum rerum impedit culpa magni asperiores incidunt facilis sunt doloribus, odit mollitia molestiae ipsum fugiat iste.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, iusto. Deserunt, illum doloremque similique autem reprehenderit enim quas quos voluptas? Natus repellendus itaque iusto perferendis, accusamus magni ratione aliquam tenetur. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, iusto. Deserunt, illum doloremque similique autem reprehenderit enim quas quos voluptas? Natus repellendus itaque iusto perferendis, accusamus magni ratione aliquam tenetur.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus, iusto. Deserunt, illum doloremque similique autem reprehenderit enim quas quos voluptas? Natus repellendus itaque iusto perferendis, accusamus magni ratione aliquam tenetur.